react怎么实现登录和注册-天天时快讯

import styled from "styled-components";export const MineContainer = styled.div`   flex:1;`export const PhoneLogin =styled.div`   padding:10px;   input{      margin:3px;   }`export const UserRegister = styled.div`   padding:10px;   input{      margin:3px;   }`

import React ,{Component} from "react";import {PhoneLogin} from "./MineStyleComponent"class Login extends Component {   render(){      return(         <PhoneLogin>            手机号：<input type="text"/><br/>            验证码：<input type="password"/><br/>            <button>登录</button>         </PhoneLogin>      )   }}export default Login;==========================================================================================import React ,{Component} from "react";import {UserRegister} from "./MineStyleComponent"class Register extends Component {   render(){      return(         <UserRegister>            手机号：<input type="text"/><br/>            密码：<input type= "password" /><br/>            验证码：<input type="password"/><br/>            <button>登录</button>         </UserRegister>      )   }}export default Register;

import React, { Component} from "react";import {MineContainer} from "./MineStyleComponent"import Login from "./Login";import Register from "./register";import {Route} from "react-router-dom"class Mine extends Component {   constructor(){      super()      this.state={         loginFlag:false,//通过开关切换登录方式      }   }   check = ()=>{//通过编程导航进行两个路由的切换      if(this.state.loginFlag){         this.props.history.push("/mine/register")      }else{         this.props.history.push("/mine/login")      }      this.setState({         loginFlag:!this.state.loginFlag,      })   }      render(){      const {loginFlag} = this.state      return (         <MineContainer>           <Route path = "/mine/login" component = { Login }></Route>           <Route path = "/mine/register" component = { Register }></Route>           <button onClick = {this.check} > { loginFlag?"用户名登录":"短信验证登录"} </button>         </MineContainer>      )   }}export default Mine;

import React ,{Component} from "react";import {UserRegister} from "./MineStyleComponent"class Register extends Component {   //本地存储一个账户的模拟登录注册写法   //逻辑：通过判断本地存储，来确定用户是否登录过，点击登陆时进行判断   LoginClick = () =>{      const username = this.users.value;      const password = this.password.value;      let  ls_users = localStorage.getItem("users");      if(ls_users){         //如果ls_users存在证明已有用户注册,判断密码，用户名是否正确         ls_users = JSON.parse(ls_users)                  if(ls_users.username===username&&ls_users.password===password){            alert("登录成功")            this.props.history.push("/home")         }else{            alert("用户名或登录密码输入错误")         }      }else{         //没有用户注册，直接保存到本地存储         localStorage.setItem("users",JSON.stringify({username,password}))         this.props.history.push("/home")      }   }   render(){      return(         <UserRegister>            用户名：<input type="text" ref= {el=>this.users=el} /><br/>            密码：<input type= "password"  ref= {el=>this.password=el} /><br/>            验证码：<input type="text"/><br/>            <button onClick= {this.LoginClick} > 登录</button>         </UserRegister>      )   }}export default Register;

import React ,{Component} from "react";import {UserRegister} from "./MineStyleComponent"class Register extends Component {   //本地存储一个账户的模拟登录注册写法   //逻辑：通过判断本地存储，来确定用户是否登录过，点击登陆时进行判断   LoginClick = () =>{      let obj = [];      const username = this.users.value;      const password = this.password.value;      let  ls_users = localStorage.getItem("users");      if(ls_users){         //如果ls_users存在证明已有至少用户注册,         obj = JSON.parse(ls_users)         console.log(obj)                  //对本地存储数据进行便利与输入值对比         let fg = obj.some (item => {            if(item.username===username) return true//用户名已存在         })         if(fg){//fg为真找到用户名，接下里对密码判断            //对存储数据遍历，比对用户名名与密码            let f=false            obj.map(item => {               if(item.username===username&&item.password===password){                  f=true;                   return f;               }                 })            if(f){//查询正确可以正常登录               alert("登录成功")               this.props.history.push("/home")            }else{               alert("密码错误")            }         }else{//没找到对将用户保存到本地，进行自动注册            obj.push({username,password});            localStorage.setItem("users",JSON.stringify(obj))            this.props.history.push("/home")         }              }else{         //没有用户注册，直接保存到本地存储         obj.push({username,password})         localStorage.setItem("users",JSON.stringify(obj))         this.props.history.push("/home")      }   }   render(){      return(         <UserRegister>            用户名：<input type="text" ref= {el=>this.users=el} /><br/>            密码：<input type= "password"  ref= {el=>this.password=el} /><br/>            验证码：<input type="text"/><br/>            <button onClick= {this.LoginClick} > 登录</button>         </UserRegister>      )   }}export default Register;

const { userSchema } = require("./schema");const { userModel } = require ("./module");//连接数据库const connect = require ("./connect");connect.init();//数据库操作const db = {   user: {      add(data){//数据添加         const user = new userModel(data)         user.save()      },      query(){//数据库查询,通过promise异步函数将结果返回出去         return new Promise( (resolve,reject)=>{            userModel.find( {},(err,docs) => {//查询数据库所有               if(err) console.log(err)                resolve(docs)//将查询结果返回出去            })         })      }   }}module.exports = {   user: db.user}

//打造用户信息接口const express = require ("express");const router = express.Router();const {user} = require ("../db");//打造restful接口，不同接口暴露不同功能人router.route("/userInfo")    .post( async (req,res,next) => {                const { userName, pass} = req.body      const result = await user.query()      //判断请求与数据库数据，在遍历前需要判断后台查询是否为空值      var f =result && result.some( item => {         if( item.userName === userName ) return true      })      if(f){//证明用户名存在，需要判断密码是否正确            let passFlag = result&&result.some( (item) => {               if(item.userName===userName&&item.pass===pass){                  return true               }         });         if(passFlag){//密码正确，登录成功               res.render("user",{                       data:JSON.stringify({                     info:"登录成功",                     status:2                  })               })         }else{//密码错误               res.render("user",{                       data:JSON.stringify({                     info:"用户名已存在或用户密码错误",                     status:0                  })               })         }      }else{//用户不存在，直接存入数据库,注册         user.add({...req.body})         res.render("user",{                 data:JSON.stringify({               info:"注册成功",               status:1            })         })      }     });module.exports = router//暴露路由接口

import React ,{Component} from "react";import {UserRegister} from "./MineStyleComponent";import http from "../../utils/http";class Register extends Component {   //本地存储一个账户的模拟登录注册写法   //逻辑：通过判断本地存储，来确定用户是否登录过，点击登陆时进行判断  async LoginClick (){      const username = this.users.value;      const password = this.password.value;            const params = new URLSearchParams()      params.append("userName",username);      params.append("pass",password)      const res = await http({//调用封装好的axios数据请求方法         url:"http://localhost:3000/userInfo",         method:"POST",         data:params      })      if( res.data.status === 0 ){         alert("用户名已经存在或是用户名密码错误")       }else if ( res.data.status === 1){         alert("注册成功")       }else {         this.props.history.push("/home")         alert("登录成功")       }   }   render(){      return(         <UserRegister>            用户名：<input type="text" ref= {el=>this.users=el} /><br/>            密码：<input type= "password"  ref= {el=>this.password=el} /><br/>            验证码：<input type="text"/><br/>            <button onClick= {this.LoginClick.bind(this)} > 登录</button>         </UserRegister>      )   }}export default Register;